<template>

	<view class="container">

		<view>
			<view style="display: flex;justify-content: space-around;margin-bottom: 50rpx;">
				<!-- <view v-for="(item,index) in address" @click="addressClick(index)">{{index}}</view> -->
				<u-button v-for="(item,index_) in address" :type="index===index_?'primary':''" @click="addressClick(index_)">{{item.name}}</u-button>
			</view>

			<canvas canvasId="canvasLine" id="canvasLine" class="charts" @tap="tap($event,'canvasLine')" />


			<view style="display: flex;justify-content: space-around;margin-bottom: 50rpx;">
				<u-button :type="interval===1?'primary':''" @click="getAddress(1)">1小时</u-button>
				<u-button :type="interval===6?'primary':''" @click="getAddress(6)">6小时</u-button>
				<u-button :type="interval===12?'primary':''" @click="getAddress(12)">12小时</u-button>
				<u-button :type="interval===24?'primary':''" @click="getAddress(24)">一天</u-button>
			</view>
			<view style="display: flex;justify-content: space-around;margin-bottom: 50rpx;">
				<u-button :type="interval===-1?'primary':''" @click="getAddress(-1)">近1天</u-button>
				<u-button :type="interval===-2?'primary':''" @click="getAddress(-2)">近2天</u-button>
				<u-button :type="interval===-3?'primary':''" @click="getAddress(-3)">近3天</u-button>
				<u-button :type="interval===-5?'primary':''" @click="getAddress(-5)">近5天</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '../../utils/echarts/u-charts.js'
	var uChartsInstance = {};
	export default {
		data() {
			return {
				isShow: true,
				address: [],
				data: [],
				cWidth: 350,
				cHeight: 300,
				index: -1,
				interval: 12
			}
		},
		created() {
			this.getAddress()
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
		},
		onLoad() {

		},
		onReady() {
			this.getServerData()
		},
		methods: {
			addressClick(i) {
				console.log(i)
				this.index = i;
				this.getServerData();
			},
			toJSON(s) {
				return JSON.stringify(s);
			},
			getServerData() {
				let chartsData = {
					categories: [],
					series: [
						// 	{
						// 	area: [130.23974609375, 192, 200.1416015625, 203],
						// 	color: "#91CB74",
						// 	data: [70, 40, 65, 100, 44, 68],
						// 	index: 0,
						// 	legendShape: "line",
						// 	linearIndex: 1,
						// 	name: "成交量B",
						// 	pointShape: "circle",
						// 	show: true,
						// 	type: "line"
						// },
					]
				};

				if (this.data.length > 0) {
					for (let item of this.data[this.index]) {

						// let date = new Date(item.date).getHours();
						chartsData.categories.push('')
					}
					for (var i = 0; i < this.data.length; i++) {
						if (i !== this.index) {
							continue;
						}
						let item = this.data[i]
						chartsData.series.push({
							data: item.map(row => {
								return (row.qty / 100000000).toFixed(0)
							}),
							name: item[0].address.substring(0, 5) + '***' + item[0].address.substring(item[0].address.length - 5, item[0].address
								.length - 1),
							color: "#cbb766",
							// index: 0,
							// legendShape: "line",
							// linearIndex: 1,

							// pointShape: "circle",
							// show: true,
							// type: "line"
						})
						let bl = (item[0].qty / 100000000) / item[0].price;
						console.log(bl)
						chartsData.series.push({
							data: item.map(row => {
								return (bl * row.price).toFixed(0)
							}),
							name: 'icpPrice',
							color: "#91CB74",
							// index: 1,
							// legendShape: "line",
							// linearIndex: 2,
							// /* .substring(0, 5) */
							// pointShape: "circle",
							// show: true,
							// type: "line"
						})


					}
					console.log(chartsData)
					this.drawCharts("canvasLine", chartsData);
				}
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					//$this:this, //v2.0版本不需要再传canvasId和$this了，v1.0因为传$this会导致实例混乱
					//canvasId: canvasId, //v2.0版本不需要再传canvasId和$this了，v1.0因为传$this会导致实例混乱
					type: 'line',
					context: ctx, //v2.0版本必须要传context
					fontSize: 11,
					padding: [15, 15, 0, 15],
					dataLabel: false,
					categories: data.categories,
					series: data.series,
					animation: true,
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			tap(e, id) {
				uChartsInstance[id].showToolTip(e)
			},
			pppp() {

			},
			getAddress(interval = undefined) {
				if (interval !== undefined) {
					this.interval = interval;
					this.data = [];
					for (let item of this.address) {
						this.getData(item.address)
					}
				} else {
					this.$cloudUtils.get('icp-big-address', {}).then((res) => {
						this.address = res.data;
						for (let item of this.address) {
							item.name = item.address.substring(0, 3);
							this.getData(item.address)
						}
					}).catch((res) => {})
				}

			},
			/* icp-big-data */
			getData(addres) {
				this.$cloudUtils.get('icp-big-data', {
					address: addres,
					limit: 99999999
				}).then((res) => {
					if (res.data.length) {
						let data = [];
						if (this.interval > 0) {
							for (var i = 0; i < res.data.length; i++) {
								if (i % this.interval === 0) {
									data.push(res.data[i]);
								}
							}
						} else {
							data = res.data.slice(res.data.length - (Math.abs(this.interval) * 24), res.data.length);
						}
						console.log('data:', data)
						this.data.push(data)
						if (this.data[this.index] && this.data[this.index].length > 0 && addres === this.address[this.index].address) {
							setTimeout(() => {
								this.addressClick(this.index);
							}, 888);
						}
					}
					// this.data
				}).catch((res) => {})
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding-bottom: 40px;
	}

	.charts {
		width: 750rpx;
		height: 500rpx;
	}
</style>
